<template>
          <div class="navbar">
       
       <div class="tag">
           <ul>
               <li><a href="javascript:;">java</a></li>
               <li><a href="javascript:;">python</a></li>
               <li><a href="javascript:;">后端</a></li>
               <li><a href="javascript:;">前端</a></li>
               <li><a href="javascript:;">移动开发</a></li>
               <li><a href="javascript:;">编程语言</a></li>
               <li><a href="javascript:;">人工智能</a></li>
               <li><a href="javascript:;">大数据</a></li>
               <li><a href="javascript:;">数据结构</a></li>
               <li><a href="javascript:;">音视频</a></li>
               <li><a href="javascript:;">云原生</a></li>
               <li><a href="javascript:;">云平台</a></li>
               <li><a href="javascript:;">前沿技术</a></li>
               <li><a href="javascript:;">开源</a></li>
           </ul>
       </div>
   </div>
</template>

<script>
export default {
    name:"Navbar"
}
</script>

<style>
.main .navbar{
margin-top: 30px;    
display: flex;
width: 100%;
height: 40px;

/* border: 1px solid black; */
}
.main .navbar .tag{
width:80%;
margin: 0px 170px;
/* flex-shrink:0; */
white-space:nowrap;
position: absolute;
top:70px;
}
.main .navbar .tag ul{
  width: fit-content;  
}

.navbar .tag li{
display: inline;
margin-left: 25px;
}

.navbar .tag li a{
text-decoration: none;
color: rgba(0, 0, 0);
opacity: 0.6;
font-size: medium;
font-weight: 500;
}
.navbar .tag li a:hover{
    /* font-weight: bold; */
    opacity: 1;
   
}

</style>